<!-- views/sales/components/CustomerTable.vue -->
<template>
  <el-card class="table-card" shadow="never">
    <template #header>
      <div class="table-header">
        <div class="header-left">
          <span>客户列表</span>
          <el-tag type="info">{{ pagination.total }} 条记录</el-tag>
        </div>
        <div class="header-right">
          <el-button-group>
            <el-button :icon="Sort" @click="handleSort('name')">
              按名称排序
            </el-button>
            <el-button :icon="Sort" @click="handleSort('createdAt')">
              按创建时间排序
            </el-button>
          </el-button-group>
          
          <el-button 
            link
            :icon="Setting" 
            @click="showColumnSettings"
          >
            列设置
          </el-button>
        </div>
      </div>
    </template>
    
    <el-table 
      :data="customers" 
      style="width: 100%" 
      v-loading="loading"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      @sort-change="handleSortChange"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column prop="name" label="客户名称" width="180" sortable fixed />
      <el-table-column prop="code" label="客户编码" width="120" />
      <el-table-column prop="contactPersons" label="联系人信息" width="200">
        <template #default="scope">
          <div v-if="scope.row.contactPersons">
            {{ scope.row.contactPersons }}
          </div>
          <div v-else>
            无联系人信息
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100" sortable>
        <template #default="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
            {{ scope.row.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建时间" width="180" sortable />
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="scope">
          <el-button size="small" @click.stop="viewDetail(scope.row)">详情</el-button>
          <el-button size="small" @click.stop="editCustomer(scope.row)">编辑</el-button>
          <el-dropdown @command="handleMoreAction">
            <el-button size="small" class="el-dropdown-link">
              更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :command="{action: 'orders', row: scope.row}">
                  <el-icon><Document /></el-icon>销售订单
                </el-dropdown-item>
                <el-dropdown-item :command="{action: 'delete', row: scope.row}" divided>
                  <el-icon><Delete /></el-icon>删除客户
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.limit"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import { 
  Sort, Setting, Document, Files, DataAnalysis, 
  TrendCharts, Delete, ArrowDown 
} from '@element-plus/icons-vue'

interface ContactPerson {
  id: number
  name: string
  department: string
  position: string
  phone: string
}

interface Customer {
  id: number
  name: string
  code: string
  contactPersons: string
  status: number
  createdAt: string
  updatedAt: string
}

interface Pagination {
  page: number
  limit: number
  total: number
}

const props = defineProps<{
  customers: Customer[]
  loading: boolean
  pagination: Pagination
  selectedCustomers: Customer[]
}>()

const emit = defineEmits<{
  (e: 'selection-change', selection: Customer[]): void
  (e: 'row-click', row: Customer): void
  (e: 'sort-change', sort: { column: any, prop: string, order: string }): void
  (e: 'sort', field: string): void
  (e: 'view-detail', customer: Customer): void
  (e: 'edit', customer: Customer): void
  (e: 'more-action', command: { action: string, row: Customer }): void
  (e: 'size-change', size: number): void
  (e: 'current-change', page: number): void
  (e: 'column-settings'): void
}>()

const handleSelectionChange = (selection: Customer[]) => {
  emit('selection-change', selection)
}

const handleRowClick = (row: Customer) => {
  emit('row-click', row)
}

const handleSortChange = (sort: { column: any, prop: string, order: string }) => {
  emit('sort-change', sort)
}

const handleSort = (field: string) => {
  emit('sort', field)
}

const viewDetail = (customer: Customer) => {
  emit('view-detail', customer)
}

const editCustomer = (customer: Customer) => {
  emit('edit', customer)
}

const handleMoreAction = (command: { action: string, row: Customer }) => {
  emit('more-action', command)
}

const handleSizeChange = (size: number) => {
  emit('size-change', size)
}

const handleCurrentChange = (page: number) => {
  emit('current-change', page)
}

const showColumnSettings = () => {
  emit('column-settings')
}

const getLevelType = (level: string) => {
  switch (level) {
    case 'key': return 'success'
    case 'normal': return 'primary'
    case 'potential': return 'warning'
    default: return 'info'
  }
}

const getLevelText = (level: string) => {
  switch (level) {
    case 'key': return '重要客户'
    case 'normal': return '普通客户'
    case 'potential': return '潜在客户'
    default: return '未知'
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-actions {
  display: flex;
  gap: 12px;
}

.customer-list {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>